<template>
  <div class="register-container login-container">
    <el-image class="login-pic" :src="require('./img/login.png')"></el-image>
    <el-form
      class="login-form"
      label-width="80px"
      :model="formData"
      :rules="rules"
      hide-required-asterisk
      @keyup.enter.native="registerUser"
    >
      <el-form-item>
        <h1 class="login-form-heading">注册</h1>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" autofocus></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="registerUser"
          :disabled="!canSubmit"
        >
          注册
        </el-button>
      </el-form-item>
      <div v-if="error">{{ error }}</div>
    </el-form>
    <p>已有账号？<a href="#" @click="switchToLogin">点击登录</a></p>
  </div>
</template>

<script>
import { Image, Form, FormItem, Input, Button, Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

export default {
  components: {
    ElImage: Image,
    ElForm: Form,
    ElFormItem: FormItem,
    ElInput: Input,
    ElButton: Button
  },
  data () {
    return {
      formData: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名必填', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' }
        ]
      },
      error: ''
    }
  },
  computed: {
    canSubmit () {
      return Boolean(this.formData.username && this.formData.email && this.formData.password)
    }
  },
  methods: {
    registerUser () {
      axios.post('/users/register', this.formData)
        .then(() => {
          Message.success('注册成功')
          // 注册成功后的处理，例如跳转到登录页面
          this.$router.push('/login')
        })
        .catch(error => {
          if (error.response && error.response.data) {
            this.error = error.response.data.message || '注册失败，请重试'
          } else {
            this.error = '注册失败，请重试'
          }
        })
    },
    switchToLogin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-pic {
  width: 30vw;
  min-width: 300px;
  margin-right: 100px;
}

.login-form {
  width: 30vw;
  min-width: 300px;
}

.el-form-item:last-child {
  margin-bottom: 0;
}

.login-form-heading {
  margin: 0;
}

.register-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
